<template>
  <div class="admin">
    <table-pro :columns="columns" :requestApi="getAdminList">
      <template #role="{ row }">
        {{ row.roles?.[0]?.name ?? '暂无' }}
      </template>
      <template #status="{ row }">
        <!-- {{ row.status ? '启用' : '禁用' }} -->
        <el-switch
          :modelValue="row.status"
          size="small"
          active-text="启用"
          inactive-text="禁用"
        />
      </template>
      <template #createdAt="{ row }">
        {{ dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template #action="{ row }">
        <el-button type="primary" size="small">编辑</el-button>
        <el-button type="danger" size="small">删除</el-button>
      </template>
    </table-pro>
  </div>
</template>

<script setup lang="ts">
// import {} from 'vue'
import dayjs from 'dayjs'
import { getAdminList } from '@/api/admin'

// 定义管理员页面中表格列的数据
const columns: ITableColumn[] = [
  { prop: 'username', label: '用户名', fixed: true },
  { prop: 'nickname', label: '昵称' },
  { prop: 'phone', label: '手机号' },
  { prop: 'role', label: '角色', type: 'slot' },
  { prop: 'status', label: '状态', type: 'slot' },
  { prop: 'createdAt', label: '创建时间', type: 'slot', width: '240px' },
  { prop: 'action', label: '操作', type: 'slot', fixed: 'right' },
]
</script>

<style lang="less" scoped>

</style>
